import React, { useContext, useRef } from 'react';
import { BuilderContext, useDrawer } from 'react-flow-builder';
import { Form, Button, Input } from 'antd';

Form.create()
const ConfigForm = (props) => {
  const { selectedNode: node } = useContext(BuilderContext);
const refForm = useRef(null);
  const { closeDrawer: cancel, saveDrawer: save } = useDrawer();
  const [form] = Form.useForm();
  const handleSubmit = async () => {
    try {
      const values = await form.current.validateFields();
      save(values);
    } catch (error) {
      const values = form.current.getFieldsValue();
      save(values, !!error);
    }
  };

  return (
    <div>
      <Form  ref={form} initialValues={node.data || { name: node.name }}>
        <Form.Item name="name" label="Name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
      <div>
        <Button onClick={cancel}>取消</Button>
        <Button type="primary" onClick={handleSubmit}>
          确定
        </Button>
      </div>
    </div>
  );
};

// ConfigForm = Form.create({})(ConfigForm);

export default ConfigForm;